<template>
    <li :class="['hotel', colorFn(hotel)]">
        <!-- <router-link :to="toInfo" class="hotel_txt"> -->
        <div class="hotel-item">
            <div class="panel_title">
                <div class="hotel_name_warp">
                    <img
                            v-if="hotel.inState === '02'"
                            class="hotel_icon"
                            src="../../../assets/icon/hotel_icon/hotel_icon0.png"
                    />
                              <img
                                v-else-if="hotel.hotelType === '77'"
                                class="hotel_icon"
                                src="../../../assets/icon/hotel_icon/hotel_icon1.png"
                              />
                              <img
                                v-else-if="hotel.hotelType === '33'"
                                class="hotel_icon"
                                src="../../../assets/icon/hotel_icon/hotel_icon2.png"
                              />
                              <img
                                v-else-if="hotel.hotelType === '44'"
                                class="hotel_icon"
                                src="../../../assets/icon/hotel_icon/hotel_icon4_new.png"
                              />
                              <img
                                v-else
                                class="hotel_icon"
                                src="../../../assets/icon/hotel_icon/hotel_icon3.png"
                              />
                    <div
                            @click="
              () => {
                showInfo = !showInfo;
              }
            "
                            class="hotel_name"
                    >
                        {{ displayHotelName }}
                    </div>
                </div>

                <div class="status">
                    <img
                            v-if="hotel.inState === '02'"
                            class="icon"
                            src="../../../assets/images/explain_icon/explain_icon_0.png"
                    />
                              <img
                                v-else-if="hotel.hotelType === '77'"
                                class="icon"
                                src="../../../assets/images/explain_icon/explain_icon_1.png"
                              />
                              <img
                                v-else-if="hotel.hotelType === '33'"
                                class="icon"
                                src="../../../assets/images/explain_icon/explain_icon_2.png"
                              />
                              <img
                                v-else-if="hotel.hotelType === '44'"
                                class="icon"
                                src="../../../assets/images/explain_icon/explain_icon_11.png"
                              />
                              <img
                                v-else
                                class="icon"
                                src="../../../assets/images/explain_icon/explain_icon_new_4.png"
                              />
                    <span>{{ statusTextFn(hotel.hotelType) }}</span>
                </div>
            </div>
            <img class="right-arrow" src="../../../assets/icon/arrow/top_right.png"/>
            <ul class="total_list">
                <li>
                    <span class="txt">房间总数</span>
                    <span class="count">{{ isManage ? (hotel.houseTotal || 0) : emptyNumberStr }}</span>
                </li>
                <li>
                    <span class="txt">入住率</span>
                    <span class="count">{{
            isManage ? `${hotel.occupancy}%` || 0 : emptyPercentStr
          }}</span>
                </li>
                <li>
                    <span class="txt">工作人员人数</span>
                    <span class="count">{{
            isManage ? hotel.workPersonNum || 0 : emptyNumberStr
          }}</span>
                </li>
                <li>
                    <span class="txt">隔离人员数量</span>
                    <span class="count">{{
            isManage ? hotel.isolatePersonTotal || 0 : emptyNumberStr
          }}</span>
                </li>
            </ul>
            <div class="bottom-number-wrap" v-if="hotel.inState!='02'">
                <div @click="handleFollowTotalClick">
                    <p>{{ isManage ? hotel.followTotal || 0 : emptyNumberStr }}</p>
                    <span>关爱人数</span>
                </div>
                <div @click="handleFocusTotalClick">
                    <p>{{ isManage ? hotel.focusTotal || 0 : emptyNumberStr }}</p>
                    <span>关注人数</span>
                </div>
                <div @click="handleTenSymptomNumlick">
                    <p>{{ isManage ? hotel.tenSymptomNum || 0 : emptyNumberStr }}</p>
                    <span>十大症状人数</span>
                </div>
            </div>
        </div>
        <!-- </router-link> -->
        <div class="hotel_info" v-if="showInfo">
            <div class="info">
                <p class="title">{{ hotel.hotelName }}</p>
                <p class="address">
                    <span class="hotel_info_icon icon-hotel-address"></span>{{ hotel.hotelAddr }}
                </p>
                <p class="uname">
                    <span>
                        <span class="hotel_info_icon icon-hotel-phone"></span>挂点领导：{{ hotel.hotelContact }}
                    </span>
                    <span>
                        <span class="hotel_info_icon icon-hotel-leader"></span>联系方式：{{ hotel.hotelPhone }}
                    </span>
                </p>
                <!--<p class="phone_number">电话：{{ hotel.hotelPhone }}</p>-->
            </div>
            <div class="split"></div>
            <div class="hotel_info-people">
                <div  class="hotel_info-people-total">入住人数<b>{{ isManage ? hotel.isolatePersonTotal || 0 : emptyNumberStr
                    }}</b></div>
                <div v-show="hotel.inState != '02'" class="hotel_info-people-leave">
                    <span class="hotel_info-people-leave-label">预计明日离点的人数</span>
                    <span class="hotel_info-people-leave-target">{{ isManage ? hotel.expectLeaveTotal || 0 : emptyNumberStr }}</span>
                </div>
            </div>
            <div class="split" v-if="false"></div>
            <ul class="hotel_total_list long_li" v-if="false">
                <li>
                    <!--接口还没有对应字段-->
                    <p class="txt">
                        <span>发热</span>
                    </p>
                    <p class="count">{{ isManage ? 0 : emptyNumberStr }}</p>

                </li>
                <li>
                    <!--接口还没有对应字段-->
                    <p class="txt">
                        <span>干咳</span>
                    </p>
                    <p class="count">{{ isManage ? 0 : emptyNumberStr }}</p>

                </li>
                <li>
                    <!--接口还没有对应字段-->
                    <p class="txt">
                        <span>其他</span>
                    </p>
                    <p class="count">{{ isManage ? 0 : emptyNumberStr }}</p>

                </li>
            </ul>
            <div class="split"></div>
            <ul class="hotel_total_list">
                <li>
                    <p class="txt">
                        <span>老人</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.oldManNum || 0 : emptyNumberStr }}
                    </p>

                </li>
                <li>
                    <p class="txt">
                        <span>儿童</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.childrenNum || 0 : emptyNumberStr }}
                    </p>

                </li>
                <li>
                    <p class="txt">
                        <span>孕妇</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.gravidaNum || 0 : emptyNumberStr }}
                    </p>

                </li>
                <li>
                    <p class="txt">
                        <span>基础疾病</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.basicDiseaseNum || 0 : emptyNumberStr }}
                    </p>

                </li>
                <li>
                    <p class="txt">
                        <span>心理疾病</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.psychicNum || 0 : emptyNumberStr }}
                    </p>

                </li>
                <li>

                    <p class="txt">
                        <span>十大症状</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.tenSymptomNum || 0 : emptyNumberStr }}
                    </p>
                </li>
                <!-- <li>
                    <p class="txt">
                        <span>关爱人员总数</span>
                    </p>
                    <p class="count">
                        {{ isManage ? hotel.isolatePersonTotal || 0 : emptyNumberStr }}
                    </p>

                </li> -->
            </ul>
            </div>
    </li>
</template>

<script>
    export default {
        name: "hotelItem",
        props: {
            hotel: {
                type: Object
            }
        },
        data() {
            return {
                emptyStr: '--',
                emptyNumberStr: '0',
                emptyPercentStr: '0%',
                showInfo: false,
                peopleIcons: [
                    require('@/assets/images/people_icon/people_icon1.png'),
                    require('@/assets/images/people_icon/people_icon2.png'),
                    require('@/assets/images/people_icon/people_icon3.png'),
                    require('@/assets/images/people_icon/people_icon4.png'),
                    require('@/assets/images/people_icon/people_icon5.png'),
                    require('@/assets/images/people_icon/people_icon6.png'),
                    require('@/assets/images/people_icon/people_icon7.png'),
                ]
            }
        },
        computed: {
            toInfo() {
                return {
                    path: '/roomKanban',
                    query: {
                        hotelId: this.hotel.hotelBaseInfoId,
                        hotelName: this.hotel.hotelName,
                    },
                }
            },
            hotelTypeEnums() {
                return [
                    {label: "密接次密接隔离点", value: "77", class: 'item1', abandon: false},
                    {label: "航班入境隔离点", value: "33", class: 'item2', abandon: false},
                    {label: "境外航班机组人员隔离酒店", value: "66", class: 'item2', abandon: true},
                    {label: "香港入境隔离点", value: "44", class: 'item3', abandon: false},
                    {label: "一般隔离点", value: "11", class: 'item4', abandon: false},
                    {label: "休眠隔离点", value: "00", class: "item0", abandon: false},
                    {label: "经深圳转运到市外人员隔离酒店", value: "5", class: 'item5', abandon: true}
                ]
            },
            displayHotelName() {
                return this.hotel.hotelName.length > 8 ? `${this.hotel.hotelName.substr(0, 8)}...` : this.hotel.hotelName
            },
            isManage() {
                return true
                // return Boolean(this.hotel && this.hotel.isolatePersonTotal > 0)
            }
        },
        methods: {
            handleFollowTotalClick () {
                this.$router.push({
                    path: `/riskList?hotelId=${this.hotel.hotelBaseInfoId}&dataType=20`
                })
            },
            handleFocusTotalClick () {
                this.$router.push({
                    path: `/riskList?hotelId=${this.hotel.hotelBaseInfoId}&dataType=30`
                })
            },
            handleTenSymptomNumlick () {
                this.$router.push({
                    path: `/riskList?hotelId=${this.hotel.hotelBaseInfoId}&dataType=13&zzIds=1&zzIds=2&zzIds=4&zzIds=3&zzIds=5&zzIds=6&zzIds=7&zzIds=8&zzIds=9&zzIds=10`
                })
            },
            colorFn: function (hotel) {
                //休眠隔离点样式
                const sleepHotelTypeItem = this.hotelTypeEnums.find(
                    (i) => String(i.value) === String("00")
                );
                const hotelTypeItem = this.hotelTypeEnums.find(i => (String(i.value) === String(hotel.hotelType)))
                const defaultHotelTypeItem = this.hotelTypeEnums.find(i => (String(i.value) === String('11')))
                // 如果是休眠隔离点就返回休眠样式，默认其余情况都是一般隔离点
                return hotel.inState=='02'?sleepHotelTypeItem.class:hotelTypeItem ? hotelTypeItem.class : defaultHotelTypeItem.class
            },
            statusTextFn: function (type) {
                const hotelTypeEnums = this.hotelTypeEnums.filter(i => (!i.abandon))
                const hotelTypeItem = hotelTypeEnums.find(i => (String(i.value) === String(type)))
                // 默认其余情况都是一般隔离点
                const defaultHotelTypeItem = this.hotelTypeEnums.find(i => (String(i.value) === String('11')))
                return hotelTypeItem ? hotelTypeItem.label : defaultHotelTypeItem.label
            }
        }
    }
</script>

<style lang="scss" scoped>
    .hotel {
        position: relative;
        &.item1{
            .status{
                color: #FF8B7C;
            }
        }
        &.item2{
            .status{
                color: #FFC259;
            }
        }
        &.item3{
            .status{
                color: #4D9CFD;
            }
        }
        &.item4{
            .status{
                color: #61C39D;
            }
        }
        .hotel-item {
            width: 352px;
            background: #ffffff;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
            border-radius: 3px;
            font-size: 15px;
            padding: 10px;
            margin-bottom: 8px;

            .panel_title {
                height: 35px;
                line-height: 35px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #eef0f2;
            }

            .hotel_icon {
                width: 20px;
                height: 20px;
                margin-right: 6px;
            }

            .hotel_name_warp {
                display: flex;
            }

            .hotel_name {
                font-size: 15px;
                font-weight: 600;
                color: #2b2b2b;
                line-height: 21px;
            }

            .status {
                white-space: nowrap;
                .icon {
                    width: 20px;
                    height: 20px;
                    margin-right: 3px;
                    margin-top: -3px;
                }
            }

            .total_list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                li {
                    width: 48%;
                    display: flex;
                    justify-content: space-between;
                    height: 28px;
                    align-items: center;
                    border-bottom: 1px solid #eef0f2;

                    &:nth-child(4) {
                        border: none;
                    }

                    &:nth-child(3) {
                        border: none;
                    }

                    .txt {
                        font-size: 12px;
                        color: #999;
                    }

                    .count {
                        font-size: 15px;
                        color: #505050;
                    }
                }
            }

            .bottom-number-wrap {
                display: flex;
                height: 71px;
                background: rgba(231, 244, 255, 0.5);
                color: #2881e2;
                font-size: 15px;
                margin-top: 4px;

                & > div {
                    flex: 1;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    span {
                        font-size: 13px;
                    }
                }
            }
        }

        .right-arrow {
            display: none;
            position: absolute;
            top: 12px;
            right: 20px;
            width: 24px;
        }
    }

    .hotel_info {
        width: 100%;
        background: rgba(236, 240, 243, 0.5);
        border-radius: 0px 0px 3px 3px;
        border: 1px solid #DEDEDE;
        padding: 11px;
        margin: -9px 0 10px 0;

        .info {
            color: #000;
            font-size: 12px;
            padding-bottom: 3px;
            line-height: 19px;

            .title {
                font-size: 15px;
                font-weight: 600;
                color: #666666;
                line-height: 21px;
                margin-bottom: 6px;
            }

            .uname {
                display: flex;
                justify-content: space-between;
            }

            .address,
            .uname,
            .phone_number {
                color: #666666;
                font-size: 13px;
                height: 19px;
                line-height: 19px;
                margin-bottom: 6px;
            }
        }

        .hotel_total_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                width: 46%;
                height: 31px;
                line-height: 31px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #DADCE0;

                &:last-child {
                    border: none;
                }

                &:nth-last-child(2) {
                    border: none;
                }

                .count {
                    font-size: 15px;
                    color: #666;
                    font-weight: 600;
                }

                .txt {
                    color: #999;
                    font-size: 12px;
                }
            }
        }

        .split {
            width: 100%;
            height: 4px;
            background: #DADCE0;
            margin: 3px 0 6px 0;
        }

        .serviceTotal {
            width: 128px;
            height: 26px;
            background: #FFF2F0;
            line-height: 26px;
            text-align: center;
            margin: 10px auto 0;
            color: #FF8B7C;
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            padding: 0 11px;

            .count {
                font-size: 15px;
                font-weight: bold;
            }
        }
    }

    .hotel_info-people {
        font-size: 13px;
        text-align: center;
        line-height: 1.6em;
        padding: 6px;
    }

    .hotel_info-people-total {
        display: inline-block;
        color: #61C39D;
        line-height: 1.7em;
        margin-top: -2px;

        &:before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            background: url('./icons/hotel-peoples.svg') no-repeat;
            margin-right: 4px;
            background-size: 100%;
            vertical-align: top;
            margin-top: 4px;
        }

        b {
            display: inline-block;
            margin-left: 24px;
            font-size: 15px;
        }
    }

    .hotel_info-people-leave {
        border-top: 1px solid #DADCE0;
        margin-left: -6px;
        margin-right: -6px;
        margin-top: 8px;
        padding-top: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
    }

    .hotel_info-people-leave-label {
        color: #999;
    }

    .hotel_info-people-leave-target {
        font-size: 15px;
        color: #505050;
    }
    .hotel_info_icon{
        width: 14px;
        height: 14px;
        display: inline-block;
        background-size: 85%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        vertical-align: top;
        margin-top: 1px;
        margin-right: 4px;
    }
    .hotel_info_icon.icon-hotel-address{
        background-image: url('./icons/hotel-address.svg');
    }
    .hotel_info_icon.icon-hotel-leader{
        background-image: url('./icons/hotel-leader.svg');
    }
    .hotel_info_icon.icon-hotel-phone{
        background-image: url('./icons/hotel-phone.svg');
        margin-top: 3px;
    }
</style>
